<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="/home" key="/home">
        <router-link to="/home">
            <i class="el-icon-menu"></i>
            主页
        </router-link>
    </el-menu-item>
    <el-submenu :index="item.key || item.url" :key="item.key || item.url" v-for="item in menus">
        <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{item.title}}</span>
        </template>
        <el-menu-item :index="i.key || i.url" :key="i.key || i.url" v-for="i in item.children">
            <router-link :to="i.url">{{i.title}}</router-link>
        </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    computed: {
        ...mapGetters({
            menus: 'menus'
        })
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>

<style scoped>
    .el-menu{
        border-right: 0;
    }

    .el-menu-item a{
        display: block;
        text-decoration: none;
        color: #fff;
    }
</style>
